<template>
	<view class="footer-menu-box">
		<view class="footer-menu-item" v-for="(item, index) in menus" :key="index"  @click="actionClick(item.type)">
			<view class="menu-item-icon">
				<image :src="item.img"></image>
			</view>
			<view class="menu-item-text">
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			menus:{
				type: Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			actionClick(type){
				this.$emit('actionClick', type)
			}
		}
	}
</script>

<style lang="less">
.footer-menu-box{
	padding: 8px 0;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	border-top: 1px solid #dedede;
	text-align: center;
	z-index: 3;
	
	.footer-menu-item{
		flex: 1;
		
		.menu-item-icon{
			
			image{
				width: 48upx;
				height: 48upx;
			}
			
		}
		
		.menu-item-text{
			font-size: 12px;
		}
		
	}
	
}
</style>
